var _that;
Vue.component("page", {
    template: `
	<div>
			<table class="table table-hover text-center">
		<thead>
			<tr>
			<td>选择</td>
				<td v-for="column in columns" v-text="column.text"></td>
				<td>操作</td>
			</tr>
			</thead>
			<tbody id="tb">
			<tr v-for="designer in designers">
			<td><input type="checkbox" name="checkbox" class="checkbox"></td>
			<td  v-text="designer.contract_id" ></td>
			<td  v-text="designer.contract_project_id" ></td>
			<td  v-text="designer.contract_status" ></td>
			<td  ><img :src="designer.contract_scanning" width="80px"></td>
			<td ><a class="button border-main"  href="JavaScript:" @click="update(designer.contract_id)" >查看或更新</a>
			<a  class="button border-red"   href="#" @click="deleteById(designer.contract_id)"  >删除</a>
			</td>


			</tr>
			</tbody>
			<tfoot>
			<tr>
				<td colspan="10">
					<div class="pagelist" >
					
					<div id="ul" v-if="page!=null">
					<a  href="javascript:void(0)" @click="firstPage()">首页</a>
					<a href="javascript:void(0)" @click="topPage()">上一页</a>
					<a href="javascript:void(0)"  v-for="index in (0,page.totalPage)" v-text="index" @click="goPage(index)"></a>  
					<a href="javascript:void(0)" @click="downPage()">下一页</a>

					<a href="javascript:void(0)" @click="endPage()">尾页</a>
					每页显示
			<select v-model="example.num">
			            <option value="5">5</option>
			            <option value="10">10</option>
			            <option value="15">15</option>              	
						</select>条
					</div>
					</div>
				</td>
			</tr>
			</tfoot>
		</table>
		
		 			<div>
	共<span id="dataCount" v-if="page!=null" v-text="page.totalCount"></span>条数据
	共<span id="pageCount" v-if="page!=null" v-text="page.totalPage"></span>页
	当前是第<span id="pi" v-if="page!=null" v-text="page.pageIndex"></span>页
	</div>
	</div>
	`,
    data: function () {
        return {
            designers: [],
            page: {},

        };
    },
    props: {
        url: {
            type: String
        },
        example: {
            type: Object
        },
        columns: {
            type: Array
        }
    },
    created: function () {
        _that = this;
        this.selectByExample();
    },
    methods: {

        selectByExample: function () {
            $.ajax({
                url: _that.url,//请求地址
                type: "get",
                data: _that.example,
                dataType: "json",
                success: function (data) {//data是默认的，接收前台返回的数据    
                    if (data.obj.pageIndex > data.obj.totalPage) {
                        _that.example.pageIndex = data.obj.totalPage;
                    }
                    _that.page = data.obj;

                    for (var i = 0; i < data.list.length; i++) {

                        if (data.list[i].contract_status == 1) {
                            data.list[i].contract_status = "已审核";
                        } else if (data.list[i].contract_status == 2) {
                            data.list[i].contract_status = "未审核";
                        } else if (data.list[i].contract_status == 3) {
                            data.list[i].contract_status = "待修改";
                        }
                    }
                    _that.designers = data.list;

                }
            });
        },
        downPage: function () {
            if (_that.example.pageIndex < _that.page.totalPage) {
                _that.example.pageIndex = _that.example.pageIndex + 1;
            }
        },
        topPage: function () {
            if (_that.example.pageIndex > 1) {
                _that.example.pageIndex = _that.example.pageIndex - 1;
            }
        },
        goPage: function (index) {
            _that.example.pageIndex = index;
        },
        firstPage: function () {
            _that.example.pageIndex = 1;
        },
        endPage: function () {
            _that.example.pageIndex = _that.page.totalPage;
        },
        update: function (id) {
            if (confirm("确定查看吗？")) {
                location.href = "/contract/updatecontract.html?id=" + id;
            }
        },
        deleteById: function (id) {
            if (confirm("确定删除吗？")) {
                $.ajax({
                    url: "/contract/delete",
                    type: "get",
                    data: {"id": id},
                    dataType: "json",

                    success: function (data) {
                        _that.selectByExample();
                    }

                })
            }
        }
    },
    watch: {
        example: {
            //深度监听 监听对象中属性的变化以及集合中对象的变化
            handler: function (n, o) {
                this.selectByExample();
            },
            deep: true
        }
    }
})